<template>
  <div class="home">
    <HeaderBar title="全佳商城"/>
    <SearchBar @search="searchInfo"/>
    <!-- <div @click="onBanner1licked()"> -->
      <el-carousel v-if="banners.length>0" ref="nop" :autoplay="true" arrow="never" height="200px" >
        <div @touchstart="start($event)" @touchmove="move($event)">
          <el-carousel-item v-for="item in banners" :key="item.Url" @click.native="onBanner1licked(item)">
            <img :src="item.Picture.BigUrl" alt="image" style="width:100%;height:200px" />
          </el-carousel-item> 
       </div>
      </el-carousel>
      <!-- </div> -->
    <div class="categories">
      <CategoryItem v-for="item in homeCategories" :key="item.id" :item="item" @itemClicked="itemCatClicked"/>
    </div>
    
    <div v-if="banner2" @click.prevent="onBanner2Clicked(banner2)" class="banner2Container">
      <img :src="banner2.Picture.BigUrl" alt="" />
    </div>
    <div class="seprate"></div>
    <div class="hotProducts">
      <div class="hotProducHeader" @click.prevent="onMoreHot">
        <div>热销榜单</div>
        <div>查看更多 <span style="color:#bbb;">{{'>'}}</span></div>
      </div>
      <div v-for="item,index  in hotProducts" :key="item.id" >
        <div class="hotProductLine" v-if="index>0"></div>
        <HotProductItem   :item="item" @item-clicked="itemClicked"/>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderBar from '@/components/Header.vue'
import SearchBar from '@/components/Search.vue'
import HotProductItem from '@/components/HotProductItem.vue'
import {getHomeBanner, homeCategories,searchFindByCid} from '@/api/homepage.js'
import CategoryItem from '@/components/CategoryItem.vue'
export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    HeaderBar,
    SearchBar,
    CategoryItem,
    HotProductItem
  },
  data(){
    return{
      banners:[],
      homeCategories:[],
      banner2:null,
      hotProducts:[],
      startX: '',  //起始x坐标位置
      startY: '',  //起始y坐标位置
      moveY: '',   //移动y坐标位置
      moveX: '',   //移动x坐标位置  
    }
  },
  mounted(){
    this.getHomePageInfo();
  },
  methods:{
     start(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    move(e) {
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      var nowtime = new Date().getTime();
      if (this.startTime == undefined || nowtime > this.startTime) {
        if (this.startX - this.moveX <= 0) { // 右滑触发
          this.prev();
          return false;
        } else{
          this.next();
          return false;
        }
      }
    },
    prev() {
      this.$refs.nop.prev();
      this.startTime = new Date().getTime() + 500;
    },
    next() {
      this.$refs.nop.next();
      this.startTime = new Date().getTime() + 500;
    },
    itemClicked(item){
      //console.log("点击了商品",item); 
      this.$router.push({path:'/product',query:{id:item.Id}})
    },
    itemCatClicked(item){
      console.log("点击了分类",item);
      // if(item.Id == 243){
        this.$router.push({path:'/subList',query:{id:item.Id,selectedId:item.Id,name:item.Name,fromHome:true}})
      // }else{
      //   this.$router.push({path:'/categry',query:{id:item.Id}})
      // }
      
      // this.$router.push({path:'/subList',query:{id:item.Id,selectedId:item.Id,name:item.Name}})
    },
    onMoreHot(){
      //console.log("点击了更多热销");
    },
    onBanner1licked(item){
      console.log("点击了轮播图",item,item.Url);
      let datas = item.Url.split('id=');
      // console.log(datas);
      if(datas.length>1){
        this.$router.push({path:'/product',query:{id:datas[1]}})
      }
    },
    onBanner2Clicked(item){
      console.log("点击了轮播图2",item);
    },
    searchInfo(info){
      //console.log("搜索内容："+info);
      this.$router.push({path:'/search',query:{searchKey:info}});
    },
    getHomePageInfo(){
      getHomeBanner({name:'全佳1',picsize:50}).then(res=>{
        console.log(res);
        if(res.Code == 200){
           this.banners = res.Data.Items;
        }
        
      })
      getHomeBanner({name:'全佳2',picsize:50}).then(res=>{
        // //console.log(res);
        if(res.Code == 200){
         this.banner2 = res.Data.Items[0];
        }
      })
      homeCategories().then(res=>{
        // //console.log(res);
        if(res.Code == 200){
          this.homeCategories = res.Data;
        }
      })
      // cid=105&mid=0&page=1&size=20&orderBy=0&specshow=false&tagshow=false
      searchFindByCid({cid:105,size: 12,mid:0,page:1,orderBy:0,specshow:false,tagshow:false}).then(res=>{
        //console.log(res);
        if(res.Code == 200){
          this.hotProducts = res.Data.Items;
        }
        
      })

    }
  }
}
</script>
<style  scoped>
.banner2Container{
  width: 100%;
  padding:10px 0;
  background-color: white;
  border-top: #bbb solid 5px;
}
.banner2Container img{
  width: 100%;
  height: 200px;
}
.home{
  background-color: #950000;
  height: 90%;
  overflow-y: scroll;
  width: 100vw;
}
.categories{
  background-color: aliceblue;
  padding-left: 7px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.seprate{
  width: 100%;
  height: 5px;
  background-color: #bbb;
  position: relative;
}
.hotProducts{
  /* border-top: 5px solid #bbb; */
  background-color: white;
  padding: 10px;
}
.hotProducHeader{
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding:0 10px;
  font-size: 16px;
}
.hotProductLine{
  width: 100%;
  height: 1px;
  background-color: #bbb;
}
::v-deep .ant-carousel .slick-list .slick-slide{
  pointer-events: auto;
}
::v-deep .ant-carousel .slick-dots{
  height: 10px !important;
}
::v-deep .ant-carousel .slick-dots-bottom{
  bottom: 35px;
}
::v-deep .ant-carousel .slick-dots li button{
    background-color: gray !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }
  ::v-deep .ant-carousel .slick-dots li.slick-active button{
    background-color: #950000 !important;
  }
</style>
